<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>canvas</title>
	<style>
		canvas{
			margin: 10px auto;
			display: block;
			border: 1px solid #000;
		}
	</style>
</head>
<body>
	<canvas width="500" height="500" id="canvas1"></canvas>

	<script>
		var canvas = document.querySelector("#canvas1");
		var ctx = canvas.getContext("2d");
		//文字
		// ctx.font = '48px sans-serif'
		// ctx.fillStyle = 'skyblue';
		// ctx.fillText("I love canvas",10,50);
		//实心矩形
		// ctx.fillStyle = "skyblue";
		// ctx.fillRect(0,0,100,100);
		// ctx.clearRect(40,40,20,20)
		//空心矩形
		//ctx.strokeStyle = "skyblue";
		//ctx.lineWidth = 10;
		//ctx.lineJoin="bevel";
		//ctx.lineJoin="round";
		//ctx.lineJoin="miter";
		//ctx.strokeRect(150,10,100,100)
		//路径、线
		//ctx.beginPath();
		//ctx.lineWidth = 10;
		//"round" 和 "square" 会使线条略微变长
		//ctx.lineCap="butt";
		//ctx.lineCap="round";
		//ctx.lineCap="square";
		//ctx.moveTo(20,20);
		//ctx.lineTo(20,200);
		//ctx.stroke();
		//虚线
		// ctx.fillStyle = "skyblue";
		// ctx.beginPath();
		// ctx.lineWidth = 5;
		// ctx.setLineDash([4,10,8,10,12,10,16,10,20,10,24,10,28,10]);
		// ctx.moveTo(20,20);
		// ctx.lineTo(200,20);
		// ctx.stroke();
		//圆
		// for(var i = 0;i < 10;i++) {
		// 	ctx.beginPath();
		// 	ctx.arc(i * 25,i * 25,i * 10,0,Math.PI * 2,true);
		// 	ctx.closePath();
		// 	ctx.fillStyle = 'rgba(0,0,255,0.25)';
		// 	ctx.fill();
		// }
		//椭圆
		// ctx.beginPath();
		// ctx.ellipse(200,200,55,30,Math.PI * 0, 0, Math.PI * 0.5, true);
		// ctx.closePath();
		// ctx.strokeStyle = 'rgba(0,0,255,0.25)';
		// ctx.stroke();
		//相切弧线(PS:圆角矩形)
		// ctx.beginPath();
		// ctx.moveTo(149,20);           // 创建开始点
		// ctx.lineTo(100,20);          // 创建水平线
		// ctx.arcTo(150,20,150,70,50); // 创建弧
		// ctx.lineTo(150,120);         // 创建垂直线
		// ctx.stroke();  
		//相切弧线传递旋转角
		// ctx.beginPath();
		// ctx.moveTo(150,20);
		// ctx.arcTo(150,100,50,30,30);
		// ctx.stroke();
		//一次贝塞尔曲线
		// ctx.beginPath();
		// ctx.moveTo(25,100);
		// ctx.quadraticCurveTo(25,25,100,25);
		// ctx.stroke();
		//二次贝塞尔曲线
		// ctx.beginPath();
		// ctx.fillStyle = "red";
	    // ctx.moveTo(75,40);
	    // ctx.bezierCurveTo(75,37,70,25,50,25);
	    // ctx.bezierCurveTo(20,25,20,62.5,20,62.5);
	    // ctx.bezierCurveTo(20,80,40,102,75,120);
	    // ctx.bezierCurveTo(110,102,130,80,130,62.5);
	    // ctx.bezierCurveTo(130,62.5,130,25,100,25);
	    // ctx.bezierCurveTo(85,25,75,37,75,40);
	    // ctx.fill();
	    //Path2D对象
	    // var rect = new Path2D();
	    // rect.rect(10,10,50,50);
	    // var circle = new Path2D();
	    // circle.moveTo(125,35);
	    // circle.arc(100,35,25,0,2 * Math.PI);
	    // ctx.stroke(rect);
	    // ctx.stroke(circle); //可以通过传递Path2D对象或者addPath()合并
	    //Path2D传参 SVG路径
	    // var path = new Path2D("M10 10 h 80 v 80 h -80 z");
	    // ctx.fill(path);
	    //线性渐变
	    // var g1 = ctx.createLinearGradient(0,0,0,300);
	    // g1.addColorStop(0,'red');
	    // g1.addColorStop(0.5,'pink');
	    // g1.addColorStop(1,'blue');
	    // ctx.fillStyle = g1;
	    // ctx.fillRect(0,0,400,300);
	    //径向渐变
	 	// var g2 = ctx.createRadialGradient(100,100,0,100,100,50);
		// g2.addColorStop(0, 'red');
		// g2.addColorStop(0.5, 'blue');
		// g2.addColorStop(1, 'pink');
		// ctx.beginPath();
		// ctx.fillStyle = g2;
		// ctx.arc(100,100,50,0,Math.PI * 2,true);
		// ctx.closePath();
		// ctx.fill();
		//矩形的径向渐变
		// var g2 = ctx.createRadialGradient(50,50,20,60,60,70.7);
		// g2.addColorStop(0, 'yellow');
		// g2.addColorStop(0.5, 'purple');
		// g2.addColorStop(1, 'pink');
		// ctx.fillStyle = g2;
		// ctx.fillRect(10,10,100,100);
		//坐标变换
		// ctx.translate(200,50);
		// ctx.fillStyle = 'rgba(255,0,0,0.25)';
		// for(var i = 0;i < 50;i++) {
		// 	ctx.translate(25,25);
		// 	ctx.scale(0.95,0.95);
		// 	ctx.rotate(Math.PI / 10);
		// 	ctx.fillRect(0,0,100,50);
		// }
		//路径的坐标变换
		// ctx.fillStyle = '#eef';
		// ctx.fillRect(0,0,400,300);
		// ctx.translate(200,50);
		// for(var i = 0;i < 50;i++) {
		// 	ctx.translate(25,25);
		// 	ctx.scale(0.95,0.95);
		// 	ctx.rotate(Math.PI / 10);
		// 	creatStar(ctx);
		// 	ctx.fill();
		// }
		// function creatStar(ctx) {
		// 	var n = 0;
		// 	var dx = 100;
		// 	var dy = 0;
		// 	var s = 50;
		// 	ctx.beginPath();
		// 	ctx.fillStyle = 'rgba(255,0,0,0.5)';
		// 	var x = Math.sin(0);
		// 	var y = Math.cos(0);
		// 	var dig = Math.PI / 5 * 4;
		// 	for(var i = 0;i < 5;i++) {
		// 		var x = Math.sin(i * dig);
		// 		var y = Math.cos(i * dig);
		// 		ctx.lineTo(dx + x * s,dy + y * s);
		// 	}
		// 	ctx.closePath();
		// }
		//图形阴影
		// var n = 0;
		// var dx = 200;
		// var dy = 100;
		// var s = 50;
		// ctx.fillStyle = 'rgba(255,0,0,0.5)';
		// ctx.shadowOffsetX = 10;
		// ctx.shadowOffsetY = 10;
		// ctx.shadowColor = 'skyblue';
		// ctx.shadowBlur = 7;
		// ctx.beginPath();
		// var x = Math.sin(0);
		// var y = Math.cos(0);
		// var dig = Math.PI / 5 * 4;
		// for(var i = 0;i < 5;i++) {
		// 	var x = Math.sin(i * dig);
		// 	var y = Math.cos(i * dig);
		// 	ctx.lineTo(dx + x * s,dy + y * s);
		// }
		// ctx.closePath();
		// ctx.fill();
		//使用图像--利用Image对象的onload事件执行绘制，一边装载一边绘制
		// var image = new Image();
		// image.src = '11.jpg';
		// image.onload = function() {
		// 	ctx.drawImage(image,50,25,100,100);
		// 	ctx.drawImage(image,40,40,10,10,200,200,200,200);
		// }
		//图像平铺
		// var image = new Image();
		// image.src = '11.jpg';
		// image.onload = function() {
		// 	var ptrn = ctx.createPattern(image,'repeat');
		// 	ctx.fillStyle = ptrn;
		// 	ctx.fillRect(0,0,300,300);
		// }
		//像素处理--一个对像素颜色反显操作的示例
		var image = new Image();
		image.src = '11.jpg';
		image.onload = function() {
			ctx.drawImage(image,0,0);
			var imagedata = ctx.getImageData(0,0,image.width,image.height);
			var len = imagedata.data.length;
			console.log(len);//应该是多少呢？？
			for(var i = 0;i < len;i+=4) {
				imagedata.data[i + 0] = 255 - imagedata.data[i + 0];
				imagedata.data[i + 1] = 255 - imagedata.data[i + 2];
				imagedata.data[i + 2] = 255 - imagedata.data[i + 1];
			}
			ctx.putImageData(imagedata,0,0);
		}

	</script>
</body>
</html>